<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    canvas{border: solid 1px black;}
  </style>
</head>
<body>
  <canvas id="cvs" width="400" height="200"></canvas>
</body>
<script>

  const cvs = document.querySelector("#cvs");
  const c2d = cvs.getContext("2d");

  c2d.moveTo(50, 50);
  c2d.lineTo(150, 150);
  c2d.lineTo(250, 50);
  c2d.closePath();

  // 设置填充颜色
  c2d.fillStyle = "red";
  c2d.lineWidth = 10;
  // 填充
  c2d.fill();
  c2d.stroke();

  // 注意：
  // 因为：
  // 填充的颜色，会延伸到路径的位置
  // 描边，是基于路径的位置，向两侧延伸
  // 所以：
  // 填充会延伸到描边的中间位置
  // 后写的会覆盖先写的



  
</script>
</html>